<template>
  <div class="not-found">
    <el-button class="btn" :icon="House" type="primary" size="large" plain @click="handleClickBtnGoHome">返回首页</el-button>
  </div>
</template>
<script setup lang="ts">
import { House } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const handleClickBtnGoHome = () => {
  router.push('/')
}
</script>
<style lang="scss" scoped>
.not-found {
  position: relative;
  widows: 100%;
  height: 100%;
  background: url(../assets/imgs/404.png) 50% 50% no-repeat;
  background-size: 50%;
  .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    margin-top: 300px;
  }
}
</style>
